<template>
  <div class="content">
    <div class="item" @click="goPage('我的6S')">
      <div class="myIcon">
        <svg-icon icon-class="我的6S" />
      </div>
      我的6S
    </div>
    <div class="item" @click="goPage('提交6S')">
      <div class="myIcon">
        <svg-icon icon-class="提交6S" />
      </div>
      提交6S
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
function goPage(name) {
  let path = '';
  switch (name) {
    case '我的6S':
      path = '/SixManage/MySix';
      break;
    case '提交6S':
      path = '/SixManage/SubmitSix';
      break;
  }
  router.push(path);
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20rpx;
  .item {
    display: flex;
    border: #ddd solid 1px;
    border-radius: 10rpx;
    height: 90rpx;
    background-color: white;
    align-items: center;
    justify-content: center;
    font-size: 18rpx;
    .myIcon {
      width: 55rpx;
      height: 55rpx;
      box-sizing: border-box;
      border-radius: 50%;
      border: 5px solid #59aef2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 30px;
    }
    &:nth-child(2) {
      .myIcon {
        border: 5px solid #F1634D;
      }
    }
  }
}
</style>
